<template>
    <div id='cust_info'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="header-top">
                <div class="header-item">
                  <div class="header-item-left mr24">姓名:</div>
                  <div class="header-item-right">
                      <el-input v-model="custName" placeholder="请输入姓名" clearable></el-input>
                  </div>
                </div>
                <div class="header-item">
                    <div class="header-item-left">手机号:</div>
                    <div class="header-item-right">
                        <el-input v-model="custTell" placeholder="请输入手机号" clearable></el-input>
                    </div>
                </div>
                <div class="header-item" >
                    <div class="header-item-left">证件号:</div>
                    <div class="header-item-right">
                        <el-input v-model="custCertificates" placeholder="请输入证件号" clearable></el-input>
                    </div>
                </div>
                <div class="alr-item">
                  <span class="fl">客户端:</span>
                  <el-select v-model="custClient" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div class="header-item">
                  <span class="fl">
                    注册时间:
                  </span>
                  <el-date-picker                        
                    type="datetimerange"
                    range-separator="至"
                    @change="pickTime"
                    start-placeholder="开始日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    v-model="custTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    end-placeholder="结束日期">
                  </el-date-picker>
                  <!-- <el-date-picker
                    v-model="custTime"
                    type="datetimerange"
                     @change="pickTime"
                     range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker> -->
                </div>
                <div class="header-item">
                  <div class="header-item-left mr24">渠道ID:</div>
                  <div class="header-item-right">
                      <el-input v-model="custChannelId" placeholder="请输入渠道ID" clearable></el-input>
                  </div>
                </div>
                <div class="header-button mr24">
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <div class="header-button">
                  <el-button type="plain" @click="clearFn">取消</el-button>
                </div>
            </div>
          </el-card>
          <el-card class="box-card box-card1">
              <div class="header-button">
                  <el-button type="plain" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
              </div>
              <el-table
                :data="tableData"
                v-loading="loading"
                stripe
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="56">
                </el-table-column>
                <el-table-column
                  prop="phone"
                  align="center"
                  :formatter="ccn"
                  label="手机号">
                </el-table-column>
                <el-table-column
                  prop="name"
                  align="center"
                  :formatter="ccn"
                  label="姓名">
                </el-table-column>
                <el-table-column
                  prop="idCard"
                  align="center"
                  :formatter="ccn"
                  label="证件号码">
                </el-table-column>
                <el-table-column
                  prop="registerTime"
                  align="center"
                  :formatter="ccn"
                  label="注册时间">
                </el-table-column>
                <el-table-column
                  prop="channel"
                  align="center"
                  :formatter="ccn"
                  label="渠道ID">
                </el-table-column>
                <el-table-column
                  prop="mobileType"
                  align="center"
                  :formatter="ccn"
                  label="申请设备">
                </el-table-column>
                <el-table-column
                  prop="amount"
                  align="center"
                  :formatter="ccn"
                  label="额度">
                </el-table-column>
                <!-- fixed="right" -->
                <el-table-column
                  align="center"
                  width="168"
                  
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-search"  @click="showData(scope.row)">资料</el-button>
                    <span style="color:red;">/</span>
                    <el-button
                      icon="el-icon-edit"
                      @click.native.prevent="addBlacklist(scope.row)"
                      type="text"
                      size="mini">
                      黑名单
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination 
                  v-show="tableData.length" 
                  class="pan"  
                  @current-change="handleCurrentChangeone" 
                  :current-page="pageIndexOne"  
                  layout="total, prev, pager, next, jumper" 
                  :pager-count="5"
                  :total="totalone" 
                  :background="true">
              </el-pagination>
          </el-card>

          <el-dialog
            title="用户信息"
            :visible.sync="show_modal_data"
            width="80%">
            <div class="add">
                 <el-tabs v-model="custTabs" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                            <div class="title">认证照片</div>
                            <ul class="nav nav2">
                                <li class="img" @click='setCurrentImg(dataObj.cardFront)'><img :src="dataObj.cardFront"></li>
                                <li class="img" @click='setCurrentImg(dataObj.cardBack)'><img :src="dataObj.cardBack"></li>
                                <li class="img" @click='setCurrentImg(dataObj.cardGroup)'><img :src="dataObj.cardGroup"></li>
                            </ul>
                            <div class="title">基本信息</div>
                            <ul class="nav3">
                                <li>
                                <span>真实姓名 : </span>
                                <span>{{dataObj.name || placeholder}}</span>
                              </li>
                              <li>
                                <span>性别 : </span>
                                <span>{{dataObj.sex || placeholder}}</span>
                              </li>
                              <li>
                                <span>年龄 : </span>
                                <span>{{dataObj.age || placeholder}}</span>
                              </li>
                              <li>
                                <span>身份证号码 : </span>
                                <span>{{dataObj.idCard || placeholder}}</span>
                              </li>
                              
                            </ul>
                            <ul class="nav3">
                              <li class="list">
                                <span>注册手机号 : </span>
                                <span>{{dataObj.phone || placeholder}}</span>
                              </li>
                              <li>
                                <span>学历 : </span>
                                <span>{{dataObj.educationLevel || placeholder}}</span>
                              </li>
                              <li>
                                <span>职业 : </span>
                                <span>{{dataObj.job || placeholder}}</span>
                              </li>
                              
                            </ul>
                            <ul class="nav3">
                                <li>
                                <span>婚姻状况 : </span>
                                <span>{{dataObj.marriage || placeholder}}</span>
                              </li>
                              <li>
                                <span>子女情况 : </span>
                                <span>{{dataObj.childCount | iskon}}个</span>
                              </li>
                              <li>
                                <span>现居住地址 : </span>
                                <span>{{dataObj.addressNow || placeholder}}</span>
                              </li>
                            </ul>
                    </el-tab-pane>
                    <el-tab-pane label="借款记录" name="second">
                        <el-table
                        class="el-table1"
                        :data="tableDataList"
                        v-loading="loading1"
                        stripe
                        style="width: 100%;height:500px;overflow-y:scroll;">
                        <el-table-column
                          prop="lendCode"
                          label="订单号"
                          :formatter="ccn"
                          align="center">
                        </el-table-column>
                        <el-table-column
                          prop="lendAmount"
                          align="center"
                          :formatter="ccn"
                          label="借款金额">
                        </el-table-column>
                        <el-table-column
                          prop="lendCycle"
                          :formatter="ccn"
                          align="center"
                          label="借款周期">
                        </el-table-column>
                        <el-table-column
                          prop="operatorTime"
                          align="center"
                          :formatter="ccn"
                          label="申请时间">
                        </el-table-column>
                        <el-table-column
                          prop="lendRealAmount"
                          align="center"
                          :formatter="ccn"
                          label="到账金额">
                        </el-table-column>
                        <el-table-column
                          prop="realRepayAmount"
                          align="center"
                          :formatter="ccn"
                          label="实际还款金额">
                        </el-table-column>
                        <el-table-column
                          prop="days"
                          align="center"
                          :formatter="ccn"
                          label="逾期天数">
                        </el-table-column>
                        <el-table-column
                          prop="overDueAmount"
                          align="center"
                          :formatter="ccn"
                          label="逾期总金额">
                        </el-table-column>
                        <el-table-column
                          prop="extendNumber"
                          align="center"
                          :formatter="ccn"
                          label="展期次数">
                        </el-table-column>
                        <el-table-column
                          prop="currentStatus"
                          align="center"
                          label="状态">
                          <template slot-scope="scope">
                            <!-- {{scope.row.currentStatus}} -->
                              <span style="color:#67c23a" v-show="scope.row.currentStatus=='结清'">结清</span>
                              <span style="color:#409EFF" v-show="scope.row.currentStatus=='未结清'">未结清</span>
                              <span style="color:#f56c6c" v-show="scope.row.currentStatus=='逾期'">逾期</span>
                          </template>
                        </el-table-column>
                        
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
            </div>
          </el-dialog>

          <!-- 图片处理 -->
          <images-view
            v-if='currentImg'
            :show='show_modal_img' 
            :url='currentImg'
            @close='show_modal_img = false'>
          </images-view>
    </div>

</template>
<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import imagesView from '../components/ImagesView.vue'
    import { custInfoApi } from '../api/api'
    export default {
        components:{
            imagesView,
        },
        data() {
            return {
                custName:"",
                custTell:"",
                custCertificates:"",
                custClient:null,
                options:[{
                  id: null,
                  name: '所有'
                },{
                  id: '101',
                  name: 'Android'
                }, {
                  id: '102',
                  name: 'IOS'
                }],
                custTime:"",
                custChannelId:"",
                tableData: [],
                show_modal_data:false,
                loading:false,
                loading1:false,
                startTime:"",
                endTime:"",
                custTabs:"first",
                show_modal_img:false,
                placeholder:"--",
                currentImg:false,
                imgurl:"https://huishoubaofile.dai3000.com/huishoubaoidfront30b4935b192e495c9623b0251f2d0b0a.jpg?uploadUuid=0e5fa8730a8542309e78cb7ea2657096",
                custCollapse:['1'],
                pageIndexOne:1,
                pageSizeOne:10,
                totalone:null,
                userId:"",
                userDataId:"",
                dataObj:{},
                tableDataList:[],
            }
        },
        computed:{
            ...mapGetters([
                'localInfo',
            ]),
        },
        methods:{
            handleCurrentChangeone(val) {
                console.log(`当前页: ${val}`);
                this.pageIndexOne=val;
                console.log(this.pageIndexone)
                this.initList()
            },
            ccn(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                    return cellValue
                }
                /*else if(cellValue!=0&&cellValue){
                    return (cellValue/100)
                }*/
            },
            setCurrentImg(img){
                this.currentImg = img
                this.show_modal_img = true
            },
            //资料tabs
            handleClick(){

            },
            handleChange(val) {
              console.log(val);
            },
            //加入黑名单
            addBlacklist(item){
              this.userId=item.userId
                this.$confirm('此操作将该条信息添加黑名单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    let msg ={
                        userId:this.userId
                    }
                      custInfoApi.custAddBlackUser(msg)
                      .then(result=>{
                              this.$message({
                                message: '你已经将该条信息加入黑名单',
                                type: 'success'
                              });
                      })
                      .catch(error => {
                          console.error(error)
                      })

                  }).catch(() => {
                  });
            },
            pickTime(data){
                if(data){
                    this.startTime=data[0]
                    this.endTime=data[1]
                  }else{
                     this.startTime=""
                    this.endTime=""
                  }
            },
            //资料接口函数
            showData(item){
                this.userDataId=item.userId
                this.show_modal_data=true
                //基本信息
                let msg = {
                  userId:this.userDataId,
                }
                custInfoApi.custUserBasicInfo(msg)
                .then(result=>{
                    this.dataObj=result
                    console.log(this.dataObj)
                })
                .catch(error => {
                    console.error(error)
                    this.dataObj={}
                })
                //借款记录
                this.loading1=true
                custInfoApi.custGetBorrowAmountRecordList(msg)
                .then(result=>{
                    this.tableDataList=result
                    console.log(result)
                    this.loading1=false
                })
                .catch(error => {
                    console.error(error)
                    this.loading1=false
                    this.tableDataList=[]
                })
            },
            //清除搜索条件
            clearFn(){
                this.custName=""
                this.custTell=""
                this.custCertificates=""
                this.custClient=null
                this.custTime=""
                this.startTime=""
                this.endTime=""
                this.custChannelId=""
            },
            search(){
                this.pageIndexOne=1
                 this.initList()
            },
            refresh(){
                this.initList()
            },
            //初始化函数
            initList(){
              let msg = {
                  name:this.custName,
                  phone:this.custTell,
                  idCard:this.custCertificates,
                  mobileType:this.custClient,
                  channel:this.custChannelId,
                  pageIndex:this.pageIndexOne,
                  pageSize:this.pageSizeOne,
                  startTime:this.startTime,
                  endTime:this.endTime,
              }
              console.log(this.pageIndexOne)
                this.loading=true
                custInfoApi.custUserInfoList(msg)
                .then(result=>{
                    console.log(result)
                    this.tableData=result.page.list;
                    this.totalone=result.page.totalRow
                    this.pageSizeOne=result.page.pageSize
                    this.pageIndexone=result.page.pageNumber
                    this.loading=false
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                    this.tableData=[]
                })
            },
        },
        filters:{
            iskon(item){
                if(item==undefined){
                    return "--"
                }else{
                    return item
                }
            },
        },
        created(){
            this.initList()
        },
    }
</script>
<style>
    #cust_info .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
      font-weight: normal;
    }
    #cust_info .el-card__body{
      padding: 0px 20px 0px 20px;
    }
    #cust_info .el-input--prefix .el-input__inner{
      padding-left: 40px;
    }
    #cust_info .el-button{
        line-height: 14px;
        height: 40px;
    }
    #cust_info .el-button+.el-button{
      margin-left: 0;
    }
    #cust_info .el-button [class*=el-icon-]+span{
      margin-left: 2px;
    }
    #cust_info .el-tabs__item{
      font-size: 16px;
    }
    #cust_info .el-table1::before{
      height: 0;
    }
    #cust_info .el-dialog__body{
      padding: 0px 20px 30px 20px;
    }
    #cust_info .el-tabs__header{
      margin: 0;
    }
    #cust_info .el-tabs__nav-wrap::after{
      height: 0px;
      border-bottom: 1px solid #dcdfe6;
    }
    #cust_info .el-tabs__active-bar{
      background-color: #e4e7ed;
      height: 0px;
      border-bottom: 1px solid #dcdfe6;
    }
    #cust_info .el-tabs__nav{
      margin-left: 20px;
    }
    #cust_info .el-date-editor--datetimerange.el-input__inner{
      width: 426px  ;
    }
</style>
<style lang="scss" scoped>
    #cust_info{
        font-weight: normal;
        .box-card{
            margin:20px 0 20px 0!important;
            padding-bottom:20px;
        }
        .box-card1{
          padding-bottom: 0;
        }

    }
    .add{
      margin-left:20px;
    }
   #cust_info .el-breadcrumb{
    margin-top: 30px;
        font-size: 16px;
   }
   .header-item{
        margin-right:10px;
        min-width:240px;
        height:40px;
        margin-top:20px;
        float: left;
    }
    .header-item-left,.header-item-right{
        float: left;
    }
    .header-item-right{
        width:194px;
    }
    .header-item-left{
        height:40px;
        line-height: 40px;
        margin-right: 10px;
    }
    .alr-item{
    min-width:280px;
    height:40px;
    margin-top:20px;
    float: left;
  }
   .fl{
    float: left;
    height:100%;
    line-height: 40px;
    margin-right: 10px;
  }
  .mr24{
    margin-right: 10px;
  }
  .header-top{
    width: 70%;
     height:12px;
   /* min-height: 12px; */
  }
  .header-bo{
    margin-top: 16px;
  }
  .header-button{
    height:40px;
    float: left;
    margin-top: 20px;
  }
  .nav2{
    text-align: center;
    height:132px;
    margin-top: 20px;
    margin-bottom: 20px;
    display:table;
    width:100%;
    padding-left:20px;
  }
  .nav2 li {
    float: left;
    margin-right: 20px;
  }
  .nav2 img{
      width:200px;
      height:132px;
      display: block;
  }
  .nav3{
    width:100%;
    font-size: 14px;
    display: table;
    height:auto;
    padding-left:20px;
  }
  .nav3 li{
    flex:1;
    float: left;
    min-width:197px;
    line-height:40px;
    position: relative;
    span{
      float: left;
    }
    span:nth-child(2){
        margin-left:10px;
    }
  }
  .list{
    min-width:197px;
  }
  .pan{
      margin-top:10px;
  }
  .title{
    height:40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    border-bottom:1px solid #dcdfe6;
    margin-bottom: 14px;
    margin-top:4px;
  }
</style>
